<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-grey'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">数据分析</block>
		</cu-custom>
		<view :class="isDark?'dark':''">
			<view style="padding-top: 0rpx;">
				<view style="height: 545rpx; background-size: cover;  background-position: center;"
					:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">
					<ad unit-id="adunit-a121169b4b7f723c" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
				</view>
				<view class="cu-bar  solid-bottom" style="font-weight:bold" :class="isDark?'dark':'bg-white'">
					<view class="action">
						<text class="cuIcon-titles text-grey"></text>数据分析
						<text class="cuIcon-search"></text>


					</view>
				</view>
				<view>123</view>
				<echarts :option="option" id="myChart"
					style="height: 1100rpx;margin-left: 20rpx;width: 100%;padding: 0 0 0 0;"></echarts>



			</view>
		</view>
		<zmm-watermark>

		</zmm-watermark>
	</view>
</template>
<script>
	import echarts from '@/components/echarts.vue';
	export default {
		components: {
			echarts
		},
		data() {
			return {
				array: [],
				index: 0,
				list: [], //显示
				totalList: [], //全部
				total: null,
				num: null,
				showEmptyIcon: false,
				isDark: this.isDark,
				scoreNum: 0,
				id: 0,
				option: {}
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.logstatrt()
		},

		onShow() {
			let _this = this

			_this.refreshInfo()




		},
		methods: {

			logstatrt() {
				// console.log('初次调用');
				this.option = {
					notMerge: true,
					backgroundColor: "#F8FAFF",
					tooltip: {
						trigger: 'axis',
						showContent: this.showContent,
						axisPointer: {
							type: 'shadow',
							label: {
								show: true
							},
						},
					},
					toolbox: {
						padding: [200, 0, 0, 0],
						show: true,
						feature: { //工具配置项
							mark: {
								show: true
							},
							dataView: { //数据视图工具，可以展现当前图表所用数据
								show: true, //是否显示该工具
								readOnly: false //是否不可编辑
							},
							magicType: {
								show: true, //是否显示该工具
								type: ['line', 'bar'] //启用的动态类型
							},
							restore: {
								show: true //是否显示该工具
							},
							saveAsImage: {
								show: true //是否显示该工具
							}
						}
					},
					calculable: false, //是否显示拖拽的手柄
					// itemHeight: 0,
					legend: { //图例组件
						data: [{
							name: '进入数',
						}, {
							name: '出去数'
						}],
						itemGap: 24,
						padding: [16, 0, 0, 0],
						// y: 'bottom',
						itemHeight: 8, //高
						itemWidth: 8, //宽
						icon: 'circle' //设置为圆
					},
					grid: {
						top: '15%',
						left: '4%',
						right: '4%',
						bottom: '6%',
						containLabel: true
					},
					xAxis: [{
						show: true,
						type: 'category', //坐标轴类型
						// boundaryGap:false, //解决数据与线不对应问题
						data: ['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10', '7.11'],
						// offset:50,
						//['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11', ], //this.xList, //obama_budget_2012.names
						axisLabel: {
							color: '#7F84B5',
							fontWeight: 300,
							interval: 0,
						},
						axisTick: {
							show: false //刻度线
						},
						axisLine: {
							show: false, //不显示坐标轴线
						},
					}, ],
					yAxis: [{
						show: true,
						boundaryGap: false, //解决数据与线不对应问题
						type: 'value',
						// name: 'Budget (million USD)',
						// data: this.yList,
						minInterval: 1,
						axisLabel: {
							interval: 0,
						},
						splitLine: {
							show: true,
							lineStyle: { //背景网格线
								type: 'dashed'
							}
						},
						axisTick: {
							show: false //刻度线
						},
						axisLine: {
							show: false, //不显示坐标轴线
						},
					}],
					dataZoom: [{
							show: false,
							start: 0,
							end: 100,
							handleSize: 8
						},
						{
							type: 'inside',
							start: 0,
							end: 50,
						},
						{
							show: false,
							yAxisIndex: 0,
							filterMode: 'empty',
							width: 12,
							height: '80%',
							showDataShadow: false,
							left: '93%',
							handleSize: 8
						}
					],
					series: [{
							name: '进入数',
							type: 'bar',
							data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120'],
							//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], // this.inNum, //obama_budget_2012.budget2011List
							color: "#00B1FF"
						},
						{
							name: '出去数',
							type: 'bar',
							data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120'],
							//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //this.outNum, //obama_budget_2012.budget2012List
							color: "#FF6C00"
						}
					]
				};
			},


			/**
			 * @description  请求成绩+学期
			 */
			refreshInfo: function() {
				let _this = this
				var userInfo = _this.$store.state.userInfo
				console.log(_this.$store.state.isExit)
				if ((_this.$store.state.isExit == 1 | userInfo.password == "" | userInfo.password == null) && _this
					.$store.state.loginTip == null) {
					_this.$store.commit("loginTip", "1")
					uni.showModal({
						title: 'Hi',
						content: '会话已过期，\n当前功能需要登录，是否要去登录?\n(该程序的用户信息只存在手机本地，当切出程序需要重新登录)',
						confirmText: "去登录",
						cancelText: "再逛会",
						success: function(res) {
							_this.$store.commit("loginTip", null)
							if (res.confirm) {
								_this.$Router.navigateTo("/pages/bind/login/index")
							} else if (res.cancel) {
								console.log("点击了取消")
							} else {
								console.log("点击了别的")
							}
						}
					});
					return
				}



				let form = {
					password: _this.$store.state.userInfo.password,
					code: 0,
					id: _this.id
				}
				_this.$schoolApi.scoreAnalyze(form).then(response => {
					if (response.status == 0) {

						_this.list = response.data
						_this.totalList = response.data
						_this.$store.commit("userScore", response.data)
						uni.showToast({
							icon: 'none',
							title: '成功获取数据',
							duration: 2000
						});
						//_this.changeList()

					} else if (response.status != 608 && response.status != 603) {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {

								} else if (res.cancel) {

								}
							}
						});
					}
				})

			}




		}

	}
</script>

<style>
	.smallButton {
		width: 400rpx;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		-moz-border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		border-radius: 10rpx;
		/* future proofing */
		-khtml-border-radius: 10rpx;
		/* for old Konqueror browsers */
		text-align: center;
		border: 1rpx solid transparent;
		margin: 0 rpx auto;
		font-size: 37rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		margin: 30rpx;
	}
</style>
